<template>
    <div id="adduser">
        <el-form ref="form" :model="users" label-width="80px">
            <el-form-item label="客户姓名">
                <el-input v-model="users.name"></el-input>
            </el-form-item>
            <el-form-item label="客户电话">
                <el-input v-model="users.phone"></el-input>
            </el-form-item>
            <!-- <el-form-item label="所属销售员">
            <el-input v-model="users.salespersonsId"></el-input>
        </el-form-item> -->
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确认新增</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("users");
export default {
    data() {
        return {
            user: { _id: '',
            account:'',
            password:'',
            name: '',
            phone: '',
            salespersonsId: '603c47f7cd0900004d007a82'}
        }
    },
    computed: {
        ...mapState(["users"]),
    },
    mounted(){
        // console.log(this.users);
        this.setUser(this.user);
        this.setSalespersonsId(JSON.parse(localStorage.loginUser)._id )
       
    },
    watch: {
        users: {
            handler(val) {
                this.setAdd(val);
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        ...mapMutations(["setAdd",'setUsers','setUser','setSalespersonsId']),
        ...mapActions(["addUsers"]),
      async onSubmit() {
           await this.addUsers();    
           this.$router.push('/System/MyCustomerList') 
        },
    },
};
</script>

<style lang="scss">
#adduser {
    width: 90%;
    margin: 0 auto;
    .el-form {
        width: 90%;
        margin: 60px;
        .el-form-item {
            margin-bottom: 20px;
            label {
                margin-right: 20px;
                font-size: 17px;
            }
            .el-input {
                width: 80%;
                // margin: 20px;
            }
            .el-button {
                width: 80px;
                line-height: 30px;
            }
        }
    }
   
}
</style>